<template>
  <div>
    <el-button
      v-if="
        (girdConfig.type === 'images-text-gird' ||
          girdConfig.type === 'images-gird') &&
          moduleNameOptions &&
          activePageForm &&
          activePageForm.activeModuleIndex != null &&
          (!moduleNameOptions[
            activePageForm.modules[activePageForm.activeModuleIndex].type
          ].maxSize ||
            activePageForm.modules[activePageForm.activeModuleIndex].modules
              .length <
            moduleNameOptions[
              activePageForm.modules[activePageForm.activeModuleIndex].type
            ].maxSize)
      "
      type="primary"
      size="small"
      round
      @click="add"
    >
      新增内容
    </el-button>
    <!--    {{ activePageForm.modules[activePageForm.activeModuleIndex] }}-->
    <div
      v-if="
        activePageForm.modules[activePageForm.activeModuleIndex].type ===
          'mofangdaohang'
      "
      class="marginTop-10"
    >
      <div class="marginTop-10 flex flex-x mofang-config">
        <div style="width: 40px">样式:</div>
        <div class="flex">
          <div
            v-for="(item, index) in girdStyles"
            :key="index"
            :class="{ girdActive: girdConfig.type === item.value }"
            @click="handleChooseGird(item)"
          >
            <img :src="item.icon" alt="#" class="config-img">
          </div>
        </div>
      </div>
      <div
        v-if="
          girdConfig.type === 'images-gird' ||
            girdConfig.type === 'images-text-gird'
        "
        class="marginTop-10 flex flex-x mofang-config"
      >
        <div style="width: 40px">列数:</div>
        <div class="">
          <el-radio-group v-model="girdConfig.row" @input="handleChooseRow">
            <el-radio :label="2">二列</el-radio>
            <el-radio :label="3">三列</el-radio>
            <el-radio :label="4">四列</el-radio>
            <el-radio
              v-if="girdConfig.type === 'images-text-gird'"
              :label="5"
            >五列</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <!-- 未配置数据相关内容 -->
    <div
      v-if="
        activePageForm.modules[activePageForm.activeModuleIndex].modules
          .length === 0
      "
      class="empty-tips"
    >
      未配置数据
    </div>
    <!-- 站内链接 -->
    <template v-else>
      <div class="title marginTop-10">注：可拖动排序</div>
      <ul>
        <draggable
          :list="
            activePageForm.modules[activePageForm.activeModuleIndex].modules
          "
          :options="{ filter: '.undrag' }"
          @change="moduleDragChange"
        >
          <li
            v-for="(item, index) in activePageForm.modules[
              activePageForm.activeModuleIndex
            ].modules"
            :key="index"
            class="link-container"
          >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <div class="flexRBC">
                  <div>
                    <span
                      v-if="item.title"
                      style="fontweight: bold; line-height: 32px"
                    >{{ index + 1 }}.&nbsp;&nbsp;{{ item.title }}</span>
                    <div v-else-if="item.bg" class="flexRSC">
                      <span
                        style="fontweight: bold; line-height: 32px"
                      >{{ index + 1 }}.&nbsp;&nbsp;</span>
                      <el-image :src="fileBaseUrl + item.bg" class="title-bg" />
                    </div>
                    <span
                      v-else
                      style="fontweight: bold; line-height: 32px"
                    >{{ index + 1 }}.</span>
                  </div>
                  <div>
                    <el-button
                      size="mini"
                      round
                      type="primary"
                      @click="edit(item, index)"
                    >编辑</el-button>
                    <el-button
                      v-if="
                        girdConfig.type === 'images-gird' ||
                          girdConfig.type === 'images-text-gird'
                      "
                      size="mini"
                      round
                      type="danger"
                      @click="del(index)"
                    >删除</el-button>
                    <el-button size="mini" round>拖拽排序</el-button>
                  </div>
                </div>
              </div>
              <div class="flexRBC">
                <div v-if="item.pic" class="pic-box">
                  <el-image :src="fileBaseUrl + item.pic" fit="contain" />
                </div>
                <div class="content-box">
                  <div>
                    <div v-if="item.title" class="flexRSS cell-item">
                      <div class="label">主标题：</div>
                      <div claa="value">{{ item.title }}</div>
                    </div>
                    <div v-if="item.subTitle" class="flexRSS cell-item">
                      <div class="label">副标题：</div>
                      <div claa="value">{{ item.subTitle }}</div>
                    </div>
                    <div v-if="item.dump.type" class="flexRSS cell-item">
                      <div class="label">跳转类型：</div>
                      <div claa="value">
                        {{ dumpTypeOptions[item.dump.type] || "无" }}
                      </div>
                    </div>
                    <div v-if="item.dump.type" class="flexRSS cell-item">
                      <div class="label">跳转链接：</div>
                      <div class="value">
                        <span v-if="item.dump.type === 'EMPTY'">无</span>
                        <span v-if="item.dump.type === 'INSIDE'">{{
                          item.dump.insideParams.remark || ""
                        }}</span>
                        <span
                          v-if="
                            item.dump.type === 'FEATURE' &&
                              item.dump.feature === 'CALL'
                          "
                        >
                          手机功能 > 拨打电话 >
                          {{ item.dump.featureParams.phone }}
                        </span>
                        <span
                          v-if="
                            item.dump.type === 'FEATURE' &&
                              item.dump.feature === 'CONTACT'
                          "
                        >手机功能 > 微信客服助手</span>
                        <span
                          v-if="item.dump.type === 'WXAPP'"
                        >小程序 > {{ item.dump.appId }} >
                          {{ item.dump.path }}</span>
                        <span
                          v-if="
                            item.dump.type === 'URL' ||
                              item.dump.type === 'URL_KF'
                          "
                        >自定义链接 > {{ item.dump.url }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="handle-box">
                  <el-button type="primary" size="small" round @click="edit(item, index)">编辑</el-button>
                  <el-button type="danger" size="small" round @click="del(index)">删除</el-button>
                  <el-button v-if="
                      activePageForm.modules[activePageForm.activeModuleIndex]
                        .modules.length > 1
                    " icon="el-icon-sort" size="small" round>拖拽排序</el-button>
                </div> -->
              </div>
            </el-card>
          </li>
        </draggable>
      </ul>
    </template>

    <!-- 组件 -->
    <DialogDump ref="dialogDump" />
    <DialogSmall ref="dialogSmall" />
  </div>
</template>

<script>
import DialogDump from './DialogDump'
import DialogSmall from './DialogSmall.vue'
import wxaBuildConfig from '@/views/wxaBuildModule/config'
import { mapGetters } from 'vuex'
import draggable from 'vuedraggable'
import { cloneDeep } from 'lodash-es'

export default {
  components: {
    DialogDump,
    draggable,
    DialogSmall
  },

  data() {
    return {
      // 配置
      dumpTypeOptions: {},
      moduleNameOptions: null,
      // 状态
      // 数据
      classifyCode: 'DEFAULT',
      girdStyles: [
        {
          icon: require('@/assets/preview/app/mofangdaohangStyle1.png'),
          value: 'images-text-gird'
        },
        {
          icon: require('@/assets/preview/app/mofangdaohangStyle2.png'),
          value: 'images-gird'
        },
        {
          icon: require('@/assets/preview/app/mofangdaohangStyle3.png'),
          value: 'images-left-gird'
        },
        {
          icon: require('@/assets/preview/app/mofangdaohangStyle4.png'),
          value: 'images-right-gird'
        }
      ],
      // 新需求,小程序魔方优化
      // 配置初始数据
      girdConfig: {
        type: 'images-text-gird',
        row: 2
      },
      originModules: [] // 源数据备份的
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'activePageForm'])
  },
  watch: {},
  created() {},
  mounted() {
    this.$bus.$on('__SMALL', this.__SMALL)
    this.dumpTypeOptions = wxaBuildConfig[this.classifyCode].dumpType
    this.moduleNameOptions = wxaBuildConfig[this.classifyCode].moduleName
    this.innitData()
    // this.fetchData();
  },
  destroyed() {
    this.$bus.off('__SMALL')
  },
  methods: {
    __SMALL() {
      const dialogSmall = this.$refs.dialogSmall
      const { height } =
        this.activePageForm.modules[this.activePageForm.activeModuleIndex]
      dialogSmall
        .open(height)
        .then(
          (res) =>
            (this.activePageForm.modules[
              this.activePageForm.activeModuleIndex
            ].height = res)
        )
    },
    /**
     * 数据组
     */
    // 初始化模块数据
    // fetchData() {
    // if (!this.activeModule.hasOwnProperty("form")) {
    //   this.form.type = this.activeModule.key;
    //   this.activeModule.form = this.form;
    // }
    // console.log(this.activeModule);
    // },

    /**
     * 按钮组
     */
    // 新增
    add() {
      this.$refs.dialogDump.open({ mode: 'add' }).then((res) => {
        console.log('add', res)
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules.push(res)
        this.$forceUpdate()
      })
    },

    // 编辑
    edit(item, index) {
      this.$refs.dialogDump.open({ mode: 'edit', row: item }).then((res) => {
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules[index] = res
        this.$forceUpdate()
      })
    },

    // 删除
    del(index) {
      this.activePageForm.modules[
        this.activePageForm.activeModuleIndex
      ].modules.splice(index, 1)
      this.$forceUpdate()
    },

    // 拖拽
    moduleDragChange(val) {
      console.log(val)
      this.$forceUpdate()
    },
    // 初始化参数
    innitData() {
      const insideParams =
        this.activePageForm.modules[this.activePageForm.activeModuleIndex].dump
          ?.insideParams?.config
      if (insideParams) {
        this.girdConfig = insideParams
      }
    },
    // 改变gird样式
    handleChooseGird: function(item) {
      // console.log('改变gird样式', item)
      this.girdConfig.type = item.value
      if (this.girdConfig.row === 5 && item.value === 'images-gird') {
        this.girdConfig.row = 4
      }
      // 将参数注入到指定字段

      this.activePageForm.modules[
        this.activePageForm.activeModuleIndex
      ].dump.insideParams.config = this.girdConfig
      // 当是左右布局gird的时候。空需要初始化数据，有数据则裁剪长度3以后的数据
      if (
        item.value === 'images-left-gird' ||
        item.value === 'images-right-gird'
      ) {
        const modules =
          this.activePageForm.modules[this.activePageForm.activeModuleIndex]
            .modules
        if (modules.length < 3) {
          const obj = {
            titleType: 'text',
            bg: '',
            biz: {
              params: {
                corpId: ''
              },
              type: 'DUMP'
            },
            color: '',
            content: '',
            dump: {
              appId: '',
              feature: '',
              featureParams: {
                phone: null,
                remark: null
              },
              insidePage: '',
              insideParams: {
                insidePageType: null,
                pageId: null,
                goodsSerial: null,
                remark: null
              },
              path: '',
              type: 'EMPTY',
              url: ''
            },
            modules: [],
            pic: 'business/39/20230116/e10cc370-1025-444f-ad21-957ee7a43c86.png',
            ranking: 0,
            style: '',
            subTitle: '',
            subType: '',
            title: '默认标题',
            type: 'mofangdaohang'
          }
          for (let i = modules.length; i < 3; i++) {
            this.activePageForm.modules[
              this.activePageForm.activeModuleIndex
            ].modules.push(obj)
          }
          // this.activePageForm.modules
        }
        if (modules.length > 3) {
          // 长度大于3的时候，保存全部模块数据
          this.originModules = cloneDeep(modules)
          this.activePageForm.modules[
            this.activePageForm.activeModuleIndex
          ].modules = modules.splice(0, 3)
        }
        this.$nextTick(() => {
          this.$store.dispatch(
            'setActivePageForm',
            JSON.parse(JSON.stringify(this.activePageForm))
          )
        })
      }
      if (item.value === 'images-gird' || item.value === 'images-text-gird') {
        const modules =
          this.activePageForm.modules[this.activePageForm.activeModuleIndex]
            .modules
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules = modules.filter(
          (v) =>
            v.pic !==
            'business/39/20230116/e10cc370-1025-444f-ad21-957ee7a43c86.png'
        )
        if (this.originModules.length > 0) {
          const originModules = this.originModules.splice(
            3,
            this.originModules.length - 1
          )
          this.activePageForm.modules[
            this.activePageForm.activeModuleIndex
          ].modules = [
            ...this.activePageForm.modules[
              this.activePageForm.activeModuleIndex
            ].modules,
            ...originModules
          ]
          this.$nextTick(() => {
            this.originModules = []
          })
        }
        this.$nextTick(() => {
          this.$store.dispatch(
            'setActivePageForm',
            JSON.parse(JSON.stringify(this.activePageForm))
          )
        })
      }
    },
    handleChooseRow(row) {
      this.girdConfig.row = row
      // 将参数注入到指定字段
      this.activePageForm.modules[
        this.activePageForm.activeModuleIndex
      ].dump.insideParams.config = this.girdConfig
    }

    /**
     * 状态组
     */

    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 格式化 */
::v-deep {
  .el-card__body {
    padding: 10px;
  }

  .el-card__header {
    padding: 10px 20px;
  }
}

/* 空的 */
.empty-tips {
  margin-top: 100px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

.link-container {
  margin-top: 10px;
  cursor: move;

  .title-bg {
    width: 188px;
    height: 33px;
  }

  .pic-box {
    margin-right: 10px;
    flex: 0 0 100px;
    height: 100px;
  }

  .content-box {
    flex: 1;
    margin-right: 10px;
    font-size: 14px;

    .cell-item {
      .label {
        flex: 0 0 80px;
        text-align: right;
      }
    }
  }

  .handle-box {
    // flex: 0 0 40px;
    text-align: right;
  }
}
.mofang-config {
  align-items: center;
  .config-img {
    width: 100px;
    height: 50px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .girdActive {
    border: 1px solid $primary;
  }
}
.marginTop-10 {
  margin-top: 10px;
}
</style>
